
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
          <span class="textTitle">存储监控</span>
        </div>
        <div class="header-right-wraper">
          <Input
            v-model="valueData"
            placeholder="请输入关键字"
            style="width: 200px"
            class="headerMar"
          />
          <Button
            type="primary"
            @click="searchList"
            class="system-btn-style headerMar"
            style="margin-right: 10px"
          >
            <Icon type="ios-search" />&nbsp;查询
          </Button>
          <!-- <Button
            type="warning"
            @click="addTaskList"
            class="system-btn-style headerMar"
          >
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;存储
          </Button> -->
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:show_details="item">
              <CButton
                title="编辑"
                variant="outline"
                class="textBtnStyle onButton system-btn-style"
                @click="LookMapUrl(item.data.row)"
                >查看</CButton
              >
            </template>
            <template v-slot:usedStorage="item">
              {{item.data.row.usedStorage.toFixed(2)}}
            </template>
            <template v-slot:status="items">
                 <span v-if="items.data.row.status == 'Running'" style="color:blue">在线</span>
            <span v-else style="color:red">离线</span>
            </template>
          </TableList>
        </div>
      </CCardBody>
    </CCard>
    <Modal
      v-model="lookData"
      draggable
      scrollable
      :styles="modalStyle"
      title="查看存储信息"
    >
      <Form :model="lookDataList" :label-width="80">
        <FormItem label="存储名">
          <Input horizontal v-model="lookDataList.name" disabled />
        </FormItem>
        <FormItem label="存储路径">
          <Input horizontal v-model="lookDataList.storePath" disabled />
        </FormItem>
        <FormItem label="存储描述">
          <Input
            horizontal
            v-model="lookDataList.description"
            type="text"
            disabled
          />
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="addDataList"
      draggable
      scrollable
      :styles="modalStyle"
      title="添加节点信息"
    >
      <Form :model="addDataListData" :label-width="80">
        <FormItem label="存储名">
          <Input horizontal v-model="addDataListData.name" />
        </FormItem>
        <FormItem label="存储路径">
          <Input horizontal v-model="addDataListData.storePath" />
        </FormItem>
        <FormItem label="存储描述" title="描述信息">
          <Input horizontal v-model="addDataListData.description" type="textarea" />
        </FormItem>
      </Form>
      <template #footer class="footerBtns">
        <CButton @click="handleReset" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="checkTaskOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";

export default {
  name: "systemManagement",
  components: { TableList },
  data() {
    return {
        addDataListData :{
            storePath:'',
            description:'',
            name:'',
        },
      addDataList: false,
      valueData: "",
      lookData: false,
      lookDataList: {},
      modalStyle: { top: "200px" },
      getColumns: [
        {
          title: "存储名",
          key: "name",
          align: "center",
          className: "centerText",
        },

        {
          title: "描述",
          key: "description",
          align: "center",
          className: "centerText",
        },

        {
          title: "存储路径",
          key: "storePath",
          align: "center",
           minwidth: "260",
          className: "centerText",
        },

        {
          title: "总空间（T）",
          key: "totalStorage",
          className: "centerText",
          width: "160",
          align: "center",
        },
        {
          title: "已用空间（T)",
          key: "usedStorage",
          slot:"usedStorage",
          className: "centerText",
          width: "160",
          align: "center",
        },
        {
          title: "剩余空间（T)",
          key: "freeStorage",
          className: "centerText",
          width: "160",
          align: "center",
        },
        {
          title: "状态",
          key: "status",
          slot:"status",
          className: "centerText",
          width: "220",
          align: "center",
        },
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          align: "center",
          width: "220",
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.getShareStorage, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  mounted() {},
  methods: {
    checkTaskOk() {
      let self = this;
      let path = this.$api.monitorApi.addshareStorage;
      let param = {
        description: self.addDataListData.description,
        name: self.addDataListData.name,
        storePath: self.addDataListData.storePath,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.addDataList = false;
          this.$refs.table.getRefreshTable();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    handleReset() {
      this.addDataList = false;
    },
    addTaskList() {
      this.addDataList = true;
    },
    searchList() {
      let path = this.$api.monitorApi.getShareStorage;
      let param = {
        pageNum: 0,
        pageSize: 0,
        name: this.valueData,
      };
      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      return;
    },
    LookMapUrl(data) {
      this.lookData = true;
      this.lookDataList = data;
    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}
</style>
